<template>
  <el-container class="my-home">
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../../assets/u011.jpg" alt="" />
        <span>后台管理系统</span>
      </div>
      <el-button type="info " plain @click="loginout">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '65px' : '200px'">
        <div class="wrepheader" @click="myopen">
          <span class="el-icon-loading"></span>
        </div>

        <el-menu
          :default-active="$route.path"
          active-text-color="#74a0cc"
          :unique-opened="true"
          :collapse-transition="false"
          :collapse="isCollapse"
          :router="true"
        >
        <el-menu-item  :default-active="$route.path"  :index="item.path" v-for="item in menulink" :key="item.id">
        <i :class="myincon[item.id]"></i>
        <span slot="title">{{ item.authName }}</span>
      </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      menulink: [],
      isCollapse: true,
      myincon: {
        125: "el-icon-sunrise",
        103: "el-icon-sunrise-1",
        101: "el-icon-sunset",
        102: "el-icon-sunny",
        145: "el-icon-cloudy-and-sunny",
      },
    };
  },
  mounted() {
    this.$http.get("/menus").then((rs) => {
      this.menulink = rs.data;
    });
  },
  methods: {
    loginout() {
      window.sessionStorage.clear();
      this.$router.push("/gk");
    },
    myopen() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>
<style lang="scss" scoped>
.my-home {
  height: 700px;
}
.el-header {
  background-color: #b8d7e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #faf9f9;
  padding: 40px 80px;
  > div {
    img {
      width: 50px;
      vertical-align: middle;
      margin-right: 30px;
    }
  }
}
.el-aside {
  background-color: #d6e6f3;
}
.el-main {
  background-color: #f7fbfc;
}
.wrepheader {
  text-align: center;
}
</style>